﻿<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .dialog {
            width: 250px;
            height: 250px;
            position: absolute;
            background-color: #FDFDFD;
            -webkit-box-shadow: 1px 1px 3px #292929;
            -moz-box-shadow: 1px 1px 3px #292929;
            box-shadow: 1px 1px 3px #292929;
            margin: 10px;
            border-radius: 10px;
        }

        .dialog-title {
            color: #948B82;
            /*background-color: #F4F0E5;*/
            background: linear-gradient(to top, red 10%,#ffffff 200%);
            font-size: 12pt;
            padding: 4px 6px;
            cursor: move;
            user-select: none;
            border-radius: 10px 10px 0px 0px;
        }

        .dialog-content {
            padding: 4px;
        }
    </style>
</head>
<body>
    <div id="dlgTest" class="dialog">
        <div class="dialog-title">Dialog</div>
        <div class="dialog-content">
            This is a draggable test.
        </div>
    </div>
    <script type="text/javascript">
        //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
        var Dragging = function (validateHandler) {
            var draggingObj = null; //dragging Dialog
            var diffX = 0;
            var diffY = 0;

            function mouseHandler(e) {
                switch (e.type) {
                    case 'mousedown':
                        draggingObj = validateHandler(e);//验证是否为可点击移动区域
                        if (draggingObj != null) {
                            diffX = e.clientX - draggingObj.offsetLeft;
                            diffY = e.clientY - draggingObj.offsetTop;
                        }
                        break;

                    case 'mousemove':
                        if (draggingObj) {
                            var left = e.clientX - diffX;
                            var top = e.clientY - diffY;

                            var maxWidth = document.documentElement.clientWidth - 270;
                            var maxHeigh = document.documentElement.clientHeight - 270;

                            if (left > 0) {
                                left = left > maxWidth ? maxWidth : left;
                            } else {
                                left = 0;
                            }

                            if (top > 0) {
                                top = top > maxHeigh ? maxHeigh : top;
                            } else {
                                top = 0;
                            }

                            draggingObj.style.left = left + 'px';
                            draggingObj.style.top = top + 'px';
                        }
                        break;

                    case 'mouseup':
                        draggingObj = null;
                        diffX = 0;
                        diffY = 0;
                        break;
                }
            }

            return {
                enable: function () {
                    document.addEventListener('mousedown', mouseHandler);
                    document.addEventListener('mousemove', mouseHandler);
                    document.addEventListener('mouseup', mouseHandler);
                },
                disable: function () {
                    document.removeEventListener('mousedown', mouseHandler);
                    document.removeEventListener('mousemove', mouseHandler);
                    document.removeEventListener('mouseup', mouseHandler);
                }
            }
        }

        function getDraggingDialog(e) {
            var target = e.target;
            while (target && target.className.indexOf('dialog-title') == -1) {
                target = target.offsetParent;
            }
            if (target != null) {
                return target.offsetParent;
            } else {
                return null;
            }
        }

        Dragging(getDraggingDialog).enable();
    </script>
</body>
</html>